<template>
    <view class="content">
        <view class="title text-lg">基础信息</view>
        <view class="box text-noraml" v-if="type == 1">
            <view class="item">
                <view>采购单号</view>
                <view class="item-r">{{data.buy_no}}</view>
            </view>
            <view class="item">
                <view>供货企业</view>
                <view class="item-r">{{data.supplier}}</view>
            </view>
            <view class="item">
                <view>供货企业销售人员</view>
                <view class="item-r">{{data.salesman}}</view>
            </view>
            <view class="item">
                <view>合计金额 (元)</view>
                <view class="item-r">￥{{data.order_amount}}</view>
            </view>
            <view class="item" v-if="data.entrust">
                <view>承运单位</view>
                <view class="item-r">{{data.entrust}}</view>
            </view>
            <view class="item" v-if="data.shipping_type_txt">
                <view>运输方式</view>
                <view class="item-r">{{data.shipping_type_txt}}</view>
            </view>
            <view class="item" v-if="data.departure_time">
                <view>启动时间</view>
                <view class="item-r">{{data.departure_time}}</view>
            </view>
            <view class="item" v-if="data.deadline">
                <view>在途时限(天)</view>
                <view class="item-r">{{data.deadline}}</view>
            </view>
            <view class="item" v-if="data.car_no">
                <view>车牌号</view>
                <view class="item-r">{{data.car_no}}</view>
            </view>
            <view class="item" v-if="data.driver_name">
                <view>司机姓名</view>
                <view class="item-r">{{data.driver_name}}</view>
            </view>
            <view class="item" v-if="data.driver_no">
                <view>司机身份证</view>
                <view class="item-r">{{data.driver_no}}</view>
            </view>
            <view class="item-img" v-if="data && data.agreement && data.agreement.length > 0">
                <view>供货企业随行同行单</view>
                <view class="item-img-down">
                    <image v-for="(el, ind) in data.agreement" :key="ind" :src="el.value" 
                        class="img" @click="$previewImage(data.agreement, ind)"></image>
                </view>
            </view>
        </view>
        
        <view class="box text-noraml" v-if="type == 2">
            <view class="item">
                <view>销退单号</view>
                <view class="item-r">{{data.refund_order_no}}</view>
            </view>
            <view class="item">
                <view>退货企业</view>
                <view class="item-r">{{data.shop}}</view>
            </view>
            <view class="item">
                <view>退货企业采购人</view>
                <view class="item-r">{{data.buyer}}</view>
            </view>
            <view class="item">
                <view>合计金额 (元)</view>
                <view class="item-r">￥{{data.order_amount}}</view>
            </view>
        </view>
        
        <view class="title text-lg">药品信息</view>
        <view class="box text-noraml">
            <view class="drug" v-for="(item, index) in data.goods_list" :key="index">
                <view class="drug-top">
                    <view class="drug-name text-bold">{{item.goods_name}}</view>
                    <!-- goods_list 里的 status = 0未收货 1已收货 -->
                    <view class="drug-state1" v-if="item.status == 1">已收货</view>
                    <view class="drug-state2" v-if="item.status == 0">未收货</view>
                </view>
                <view class="drug-down text-df">
                    <view class="drug-down-l text-gray">
                        <view class="u-p-t-15" v-if="item.dosage">剂型：{{item.dosage}}</view>
                        <view class="u-p-t-15">规格：{{item.goods_spec}}</view>
                        <view class="u-p-t-15">生产厂家：{{item.factory}}</view>
                        <view class="u-p-t-15">采购数量：{{item.goods_nums}}</view>
                    </view>
                    <view class="drug-btn" v-if="item.status == 0" @click="singleTake(item)">收货</view>
                </view>
            </view>
        </view>
        
        <view class="title text-lg">审核信息</view>
        <view class="box text-noraml">
            <view class="examine">
                <view class="examine-l">是否为冷链运输</view>
                <u-switch v-model="is_freeze" @change="change1"></u-switch>
            </view>
            <view class="examine">
                <view class="examine-l">是否符合在途时限的约定</view>
                <u-switch v-model="is_deadline" @change="change2"></u-switch>
            </view>
            <view class="examine">
                <view class="examine-l">运输方式是否符合要求</view>
                <u-switch v-model="is_shipping" @change="change3"></u-switch>
            </view>
            <view class="examine">
                <view class="examine-l">运输工具状况是否符合要求</view>
                <u-switch v-model="is_transport" @change="change4"></u-switch>
            </view>
            <view class="examine">
                <view class="examine-l">随货同行单与存档是否相符</view>
                <u-switch v-model="is_agreement" @change="change5"></u-switch>
            </view>
            <view class="examine2 borders-bottom-gray">
                <view>备注</view>
                <textarea v-model="content" maxlength="-1" :auto-height="true" placeholder="请输入" class="t-inp"></textarea>
            </view>
            <view class="examine2">
                <view>上传图片</view>
                <view class="img-box">
                    <view class="u-rela" v-for="(el, ind) in img" :key="ind">
                        <image :src="el" class="up-photo" @click="$previewImage(img, ind)"></image>
                        <view class="del-img" @click.stop="$delImage(img, imgId, ind)">删除</view>
                    </view>
                    <image src="../../static/image/up.png" class="up-photo" @click="chooseImage"></image>
                </view>
            </view>
        </view>
        
        <!-- order_status = 0未收货 1-已收货,待验收  2-已验收,待二次验收  3-已二次验收  4-已入库 -->
        <view class="btn-square u-m-30" v-if="data.order_status == 0" @click="$noMultipleClicks(doSubmit)">完成</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                noClick: true,//连点
                content: '',
                id: '',
                data: {},
                type: '',//收货订单类型 1-采购 2-销售退货
                order_status: '',//0未收货 1已收货
                is_freeze: 1,//是否冷链 0-否 1-是
                is_deadline: 1,//是否符合在途时限 0-否 1-是
                is_shipping: 1,//运输方式是否符合要求 0-否 1-是
                is_transport: 1,//运输工具是否符合要求 0-否 1-是
                is_agreement: 1,//随货同行单与存档是否相符 0-否 1-是
                img: [],
                imgId: [],
            };
        },
        onLoad(option) {
            this.id = option.id
            this.type = option.type
            this.order_status = option.order_status
        },
        onShow() {
            this.getData()
        },
        methods: {
            // 收货
            singleTake(item) {
                item.type = this.type
                item.belong_id = this.id //数据编号
                item.belong = this.type == 1 ? this.data.buy_no : this.data.refund_order_no //编号
                const newData = JSON.stringify(item)
                this.$gTo(`/pages/enter-buy/take-details-2?data=${encodeURIComponent(newData)}`)
            },
            
            // 完成
            doSubmit() {
                let isNull = false
                this.data.goods_list.forEach(cur => {
                    if (cur.status == 0) {
                        isNull = true
                    }
                })
                if (isNull) {
                    this.$toast('您有未收货的药品，请先去收货！')
                    return
                }
                
                this.$ajax('inventory_put/ack_take', {
                    userToken: this.$getSync('userToken'),
                    belong_id: this.id, //数据编号
                    type: this.type, //收货订单类型 1-采购 2-销售退货
                    is_freeze: this.is_freeze,//是否冷链 0-否 1-是
                    is_deadline: this.is_deadline,//是否符合在途时限 0-否 1-是
                    is_shipping: this.is_shipping,//运输方式是否符合要求 0-否 1-是
                    is_transport: this.is_transport,//运输工具是否符合要求 0-否 1-是
                    is_agreement: this.is_agreement,//随货同行单与存档是否相符 0-否 1-是
                    agreement_image: this.imgId,//随货同行单图片
                    memo: this.content,//备注
                }).then(ret => {
                	if (ret.status == 0) {
                        this.$toast('提交成功')
                        setTimeout(() => {
                            this.$backT()
                        }, 500)
                	} else {
                		this.$toast(ret.message);
                	}
                });
            },
            
            getData() {
            	this.$ajax('inventory_put/treat_detail', {
                    userToken: this.$getSync('userToken'),
                    id: this.id, //收货订单编号
                    type: this.type, //收货订单类型 1-采购 2-销售退货
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
            
            chooseImage() {
                uni.chooseImage({
                    count: 9, //默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 相机拍照 album 相册、camera 拍照
                    success: (res) => {
                        const tempFilePaths = res.tempFilePaths;
                        for (let i = 0; i < tempFilePaths.length; i++) {
                            this.$upLoadPic(res.tempFilePaths[i]).then(ret => {
                                console.log(ret)
                                this.imgId.push({value: ret.data.id})
                                this.img.push(ret.data.attach_uri)
                            });
                        }
                    }
                });
            },
            
            change1(status) {
                console.log(status)
                this.is_freeze = status ? 1 : 0
            },
            
            change2(status) {
                console.log(status)
                this.is_deadline = status ? 1 : 0
            },
            
            change3(status) {
                console.log(status)
                this.is_shipping = status ? 1 : 0
            },
            
            change4(status) {
                console.log(status)
                this.is_transport = status ? 1 : 0
            },
            
            change5(status) {
                console.log(status)
                this.is_agreement = status ? 1 : 0
            },
        }
    };
</script>

<style lang="scss">
    
    page{
        background-color: #f5f5f5 !important;
    }
    .title{
        font-weight: bold;
        padding: 45rpx 50rpx 25rpx;
        position: relative;
    }
    .title::after{
        display: block;
        content: '';
        width: 8rpx;
        height: 26rpx;
        background-color: #ff4800;
        position: absolute;
        left: 25rpx;
        bottom: 32rpx;
    }
    
    
    .box{
        padding: 0 30rpx;
        background-color: #fff;
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .item:last-child{
        border-bottom: none;
    }
    .item-r{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        text-align: right;
        font-weight: bold;
        padding-left: 20rpx;
    }
    .item-img{
        padding: 30rpx 0;
    }
    .item-img-down{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .img{
        width: 316rpx;
        height: 200rpx;
        border-radius: 10rpx;
        margin-top: 20rpx;
        margin-right: 20rpx;
    }
    .img:nth-child(2n) {
        margin-right: 0;
    }
    
    
    .drug{
        padding: 35rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .drug:last-child{
        border-bottom: none;
    }
    .drug-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .drug-name{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .drug-state1{
        font-size: 24rpx;
        color: #0075ff;
        padding: 9rpx 12rpx;
        background-color: #ebf4fe;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    .drug-state2{
        font-size: 24rpx;
        color: #00c28f;
        padding: 9rpx 12rpx;
        background-color: #e9fbf6;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    .drug-down{
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
    .drug-down-l{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
    }
    .drug-btn{
        color: #fff;
        padding: 17rpx 43rpx;
        background-color: #ff4800;
        border-radius: 8rpx;
        margin-left: 20rpx;
    }
    
    
    .examine{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #e6e6e6;
    }
    .examine-l{
        flex: 1;
        word-break: break-all;
        white-space: pre-line;
        padding-right: 20rpx;
    }
    .t-inp{
        width: 100%;
        min-height: 150rpx;
        height: auto;
        padding-top: 15rpx;
    }
    .examine2{
        padding: 30rpx 0;
    }
    .img-box{
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }
    .up-photo{
        width: 187rpx;
        height: 187rpx;
        margin-right: 15rpx;
        margin-top: 15rpx;
    }
    
    
    .btns{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 30rpx;
    }
    .refuse-btn{
        font-size: 34rpx;
        color: #757575;
        padding: 25rpx 130rpx;
        background-color: #fff;
        border: 2rpx solid #d8d8d8;
        border-radius: 10rpx;
    }
    .take-btn{
        font-size: 34rpx;
        color: #fff;
        padding: 25rpx 130rpx;
        background-color: #ff4800;
        border-radius: 10rpx;
        margin-left: 20rpx;
    }

</style>
